import { defineConfig, loadEnv, UserConfigExport } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import vueJsx from '@vitejs/plugin-vue-jsx'
import { visualizer } from 'rollup-plugin-visualizer'
import compression from 'vite-plugin-compression'
import viteImagemin from 'vite-plugin-imagemin'
import { viteMockServe } from 'vite-plugin-mock'

// https://vitejs.dev/config/
export default defineConfig(({ mode, command: ConfigEnv }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_BASE_PATH } = env
  return {
    base: VITE_BASE_PATH,
    plugins: [
      vue(),
      vueJsx(),
      visualizer({
        open: false, //在默认用户代理中打开生成的文件
        gzipSize: true, // 收集 gzip 大小并将其显示
        brotliSize: true, // 收集 brotli 大小并将其显示
        filename: 'stats.html' // 分析图生成的文件名
      }),
      compression({
        algorithm: 'gzip', // 指定压缩算法为gzip,[ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw']
        ext: '.gz', // 指定压缩后的文件扩展名为.gz
        threshold: 10240, // 仅对文件大小大于threshold的文件进行压缩，默认为10KB
        deleteOriginFile: false, // 是否删除原始文件，默认为false
        filter: /\.(js|css|json|html|ico|svg)(\?.*)?$/i, // 匹配要压缩的文件的正则表达式，默认为匹配.js、.css、.json、.html、.ico和.svg文件
        compressionOptions: { level: 9 }, // 指定gzip压缩级别，默认为9（最高级别）
        verbose: true, //是否在控制台输出压缩结果
        disable: false //是否禁用插件
      }),
      viteImagemin({
        gifsicle: {
          optimizationLevel: 7,
          interlaced: false
        },
        optipng: {
          optimizationLevel: 7
        },
        mozjpeg: {
          quality: 20
        },
        pngquant: {
          quality: [0.8, 0.9],
          speed: 4
        },
        svgo: {
          plugins: [
            {
              name: 'removeViewBox'
            },
            {
              name: 'removeEmptyAttrs',
              active: false
            }
          ]
        }
      })
      // viteMockServe({
      //   // default
      //   mockPath: 'mock',
      //   enable: true
      // })
    ],
    css: {
      preprocessorOptions: {
        scss: {
          //elementPlus主题 @use "@/assets/styles/element.scss" as *; 已改为全局引入
          //全局scss变量
          additionalData: '@use "@/assets/styles/index.scss" as globalScss; '
        }
      }
    },
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    },
    server: {
      host: true, // host设置为true才可以使用network的形式，以ip访问项目
      port: 8080, // 端口号
      // open: true, // 自动打开浏览器
      cors: true, // 跨域设置允许
      strictPort: true, // 如果端口已占用直接退出
      // 接口代理
      proxy: {
        '/api': {
          // 本地 8000 前端代码的接口 代理到 8888 的服务端口
          target: 'https://kp-meta.com/server/',
          changeOrigin: true, // 允许跨域
          rewrite: (path) => path.replace('/api/', '/')
        }
      }
    },
    // 生产环境打包配置
    //去除 console debugger
    build: {
      minify: 'terser',
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true
        }
      },
      rollupOptions: {
        output: {
          // 最小化拆分包
          manualChunks(id) {
            if (id.includes('node_modules')) {
              // 通过拆分包的方式将所有来自node_modules的模块打包到单独的chunk中
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          },
          // 设置chunk的文件名格式
          chunkFileNames: (chunkInfo) => {
            const facadeModuleId = chunkInfo.facadeModuleId
              ? chunkInfo.facadeModuleId.split('/')
              : []
            const fileName1 = facadeModuleId[facadeModuleId.length - 2] || '[name]'
            // 根据chunk的facadeModuleId（入口模块的相对路径）生成chunk的文件名
            return `js/${fileName1}/[name].[hash].js`
          },
          // 设置入口文件的文件名格式
          entryFileNames: 'js/[name].[hash].js',
          // 设置静态资源文件的文件名格式
          assetFileNames: '[ext]/[name].[hash:4].[ext]'
        }
      }
    }
  }
})
